<template>
    <view class="content">
        <Hearbar class="hearbar"><div></div></Hearbar>
        <view class="head">
            <view :style="{ backgroundImage: `url(${userInfo.img_url})` }" class="img"></view>
            <view class="title flex flex-col flex-center align-center">
                <up-image :src="userInfo.img_url" width="60px" height="60px" shape="circle"></up-image>
                <view class="font-18 m-t m-b">{{ userInfo.nick_name }}</view>
                <view class="flex">
                    <view class="m-r" style="width: 60px;">
                        <up-button plain size="small" @click="about(userInfo)">{{ userInfo.type === 0 ? "关注" : "取消关注"
                        }}</up-button>
                    </view>
                    <up-button plain size="small" @click="startTalk(userInfo.openid)">私聊</up-button>
                </view>
            </view>
        </view>
        <view class="body">
            <up-tabs :list="list">
            </up-tabs>
            <List v-slot="{ tableList }" api='getForumList' :searchForm='searchForm' ref="tableList"
                style="width: 100%;">
                <view class="back-white div-content m-t-ll m-b-ll p-a flex flex-col box-border"
                    v-for="(item, index) in tableList">
                    <view class="flex align-center">
                        <up-avatar name='share-square' size="30" :src="item.img_url"
                            @click="jumpToShow(item.openid)"></up-avatar>
                        <text class="font-16 m-l">{{ item.nick_name }}</text>
                        <text class="m-l">{{ item.create_time }}</text>
                    </view>
                    <view class="flex-1 m-t">
                        <rich-text class="font-18" :nodes='item.content'></rich-text>
                    </view>
                    <view class="m-b flex flex-between p-r-l">
                        <view class="flex align-center">
                            <!-- <button open-type="share" class="shared flex align-center">
                                <up-icon name="share-square" size="24"></up-icon>
                                <text class="font-14">分享</text>
                            </button> -->
                        </view>
                        <view class="flex">
                            <view class="flex align-center" @click="like(item)">
                                <up-icon name="heart" size="24"
                                    :color="item.suport_user.includes(openid) ? 'red' : ''"></up-icon>
                                <text>{{ item.suport_user.length === 0 ? "赞" : item.suport_user.length }}</text>
                            </view>
                            <view class="flex align-center m-l-ll" @click="commitDetail(item.id)">
                                <up-icon name="more-circle" size="24"></up-icon>
                                <text>评论</text>
                            </view>
                        </view>
                    </view>
                </view>
            </List>
        </view>
    </view>
</template>
<script setup>

import { ref } from 'vue';
import { attention, getUserInfo, likeOrForum, talk } from '../../utils/api';
import { onLoad } from '@dcloudio/uni-app';
import List from "@/components/List.vue"
import { dbGet } from '../../utils/db';
import Hearbar from '../../components/hearbar.vue';
const openid = dbGet("openid");
const userInfo = ref({});
const list = ref([{
    name: "帖子"
}])
const searchForm = ref({
    openid: "",
})
onLoad(({ openid }) => {
    getUserInfo({ openid }).then((res) => {
        if (res.code === 200) {
            userInfo.value = res.data;
        }
    })
    searchForm.value.openid = openid;
})
const startTalk = (openid) => {
    talk({
        persontwo_openid: openid
    }).then((res) => {
        if (res.code === 200) {
            uni.redirectTo({
                url: `/pages/message/messageContent?id=${res.data}`
            })
        }
    })
}
const about = ({ openid, type }) => {
    attention({ openid_user: openid, type: type === 0 ? 1 : 0 }).then((res) => {
        if (res.code === 200) {
            uni.showToast({
                title: '操作成功',
            })
            userInfo.value.type = type === 0 ? 1 : 0
        }
    })
}
const like = (item) => {
    let like_status = item.suport_user.includes(openid) ? '0' : '1';
    likeOrForum({
        like_status,
        id: item.id
    }).then((res => {
        if (res.code === 200) {
            if (like_status === "0") {
                let index = item.suport_user.indexOf(openid);
                item.suport_user.splice(index, 1);
            } else {
                item.suport_user.push(openid);
            }
        }
    })).catch(() => { })
}
const commitDetail = (id) => {
    uni.redirectTo({
        url: `/pages/forum/detail?id=${id}`,
    });
}
</script>


<style lang="less" scoped>
.hearbar{
    /deep/.menubutton{
        background: none;
    }
}
.img {
    opacity: 0.5;
    height: 300px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.title {
    position: absolute;
    top: 0%;
    width: 100%;
    height: 300px;
}

.body {
    width: 100%;
    height: 600upx;
    border-radius: 20px;
    position: relative;
    top: -20px;
    background: white;
}
</style>
